<template>
  <div class="login">
    <div class="login_top">
      <div class="login_top_img"></div>
      <div>天津市直管公房管理信息系统</div>
    </div>
    <div class="login_center">
      <div class="login_form">
        <div class="title">
          <div class="img"></div>
          <div>用户登录</div>
        </div>

        <div class="content">
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
            <div class="loginItem">
              <div class="prefix">
                <img src="@/assets/login/user.png" alt="">
              </div>
              <el-form-item prop="username">
                <el-input ref="username" v-model="loginForm.username" placeholder="用户名" name="username" type="text" tabindex="1" autocomplete="on" />
              </el-form-item>
            </div>

            <div class="loginItem">
              <div class="prefix">
                <img src="@/assets/login/password.png" alt="">
              </div>
              <el-form-item prop="password">
                <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="密码" name="password" tabindex="2" autocomplete="on" @keyup.enter.native="handleLogin" />
              </el-form-item>
            </div>

          </el-form>

          <div class="checkview">
            <el-checkbox label="记住账号" :checked="remberUsername" @change="checkBoxChange('username')"></el-checkbox>
            <el-checkbox label="记住密码" :checked="remberPassword" @change="checkBoxChange('password')"></el-checkbox>
          </div>
        </div>

        <div class="btn" @click="handleLogin">登录</div>
      </div>
    </div>
    <div class="login_bottom"></div>
  </div>
</template>

<script>
export default {
  name: 'Login',

  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.length <= 0) {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length <= 0) {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      loginForm: {
        username: localStorage.getItem('username'),
        password: localStorage.getItem('password')
      },

      remberUsername: false,
      remberPassword: false,

      checkList: [],
      passwordType: 'password',
      loginRules: {
        username: [
          { required: true, trigger: 'blur', validator: validateUsername }
        ],
        password: [
          { required: true, trigger: 'blur', validator: validatePassword }
        ]
      }
    }
  },

  beforeMount() {
    this.remberUsername =
      localStorage.getItem('usernameCheck') == 'false' ? false : true
    this.remberPassword =
      localStorage.getItem('passwordCheck') == 'false' ? false : true
  },

  mounted() {},

  methods: {
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$store
            .dispatch('login', this.loginForm)
            .then(() => {
              if (this.remberUsername) {
                localStorage.setItem('username', this.loginForm.username)
              } else {
                localStorage.setItem('username', '')
              }

              if (this.remberPassword) {
                localStorage.setItem('password', this.loginForm.password)
              } else {
                localStorage.setItem('password', '')
              }

              this.$router.push('/')
            })
            .catch(() => {})
        } else {
          return false
        }
      })
    },

    checkBoxChange(type) {
      if (type == 'username') {
        this.remberUsername = !this.remberUsername
        localStorage.setItem('usernameCheck', this.remberUsername)
      } else {
        this.remberPassword = !this.remberPassword
        localStorage.setItem('passwordCheck', this.remberPassword)
      }
    }
  }
}
</script>

<style scoped lang="css">
.login {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f0f2f5;
}

.login_top {
  width: 100%;
  height: 120px;
  line-height: 120px;
  font-family: SourceHanSansSC, SourceHanSansSC;
  font-weight: bold;
  font-size: 32px;
  color: #008c93;
  text-align: left;
  box-sizing: border-box;
  padding-left: 24px;
  display: flex;
  align-items: center;

  .login_top_img {
    width: clamp(45px, 4.8vw, 85px);
    height: clamp(32px, 3.3vw, 60px);
    background: url('@/assets/login/logo.png') no-repeat center center/100% 100%;
    margin-right: clamp(12px, 1.2vw, 22px);
  }
}

.login_center {
  width: 100%;
  flex: 1;
  background: url('@/assets/login/bg2.png') no-repeat center center/100% 100%;
  box-sizing: border-box;
  position: relative;

  .login_form {
    position: absolute;
    width: 550px;
    height: 90%;
    background: #ffffff;
    border-radius: 12px 12px 12px 12px;
    top: 50%;
    transform: translateY(-50%);
    right: 200px;
    box-sizing: border-box;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .title {
      width: 100%;
      height: clamp(40px, 3.3vw, 60px);
      font-family: SourceHanSansSC, SourceHanSansSC;
      font-weight: bold;
      font-size: clamp(24px, 2.2vw, 40px);
      color: #008c93;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: center;

      .img {
        width: clamp(45px, 4.8vw, 85px);
        height: clamp(32px, 3.3vw, 60px);
        background: url('@/assets/login/logo2.png') no-repeat center center/100%
          100%;
        margin-right: clamp(12px, 1.2vw, 22px);
      }
    }
  }
}

.login_bottom {
  width: 100%;
  height: 120px;
}

.loginItem {
  width: 100%;
  height: 8vh;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 24px;

  background: #f5f5f5;
  border-radius: 8px 8px 8px 8px;
  margin-bottom: 20px;

  .prefix {
    display: flex;
    align-items: center;

    img {
      width: 26.26;
      height: 28.06px;
    }
  }
}

.el-form-item {
  margin-bottom: 0;
  margin-left: 0.64rem;
}

::v-deep .el-input__inner {
  border: none;
  background: none;
  width: 374px;
  font-size: 16px;
}

.checkview {
  width: 100%;
  height: 0.5333rem;
  display: flex;
  align-items: center;
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #008c93 !important;
  border-color: #008c93 !important;
}

::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #008c93 !important;
}

.btn {
  width: 100%;

  height: 8vh;
  background: #008c93;
  border-radius: 8px 8px 8px 8px;
  text-align: center;
  line-height: 8vh;
  color: #ffffff;
  font-size: 26px;
  cursor: pointer;
}
</style>